<template>
  <div v-if="user">
    <van-cell title="头像" size="large">
      <template #right-icon>
        <img style="height: 50px; width: 50px" :src="user.avatarUrl" alt="" is-link to="" />
      </template>
    </van-cell>
    <van-cell
      title="昵称"
      :value="user.username"
      size="large"
      is-link
      @click="handleClick('username', '昵称', user.username)"
    />
    <van-cell title="性别" :value="user.gender" size="large" is-link />
    <van-cell
      title="手机号"
      :value="user.phone"
      size="large"
      is-link
      @click="handleClick('phone', '手机号', user.phone)"
    />
    <van-cell
      title="邮箱"
      :value="user.email"
      size="large"
      is-link
      @click="handleClick('email', '邮箱', user.email)"
    />
    <van-cell title="创建时间" :value="user.createTime" size="large" is-link />
  </div>

</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

defineExpose({
  name: '个人信息',
})
const user = ref()
const router = useRouter()
const userStore = useUserStore()

onMounted(() => {
  getUser()
})

const getUser = () => {
  console.log('userStore', userStore.getCurrentUser())
  if (Object.keys(userStore.getCurrentUser()).length !== 0) {
    user.value = userStore.getCurrentUser()
  } else {
    console.error("未登录")
  }
}
const handleClick = (key: string, keyName: string, value: string) => {
  router.push({
    path: '/mine/edit',
    query: {
      key,
      keyName,
      value,
    },
  })
}
</script>
